﻿@{
    ViewData["Title"] = "ArchivesAddPage";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<body>
    <!-- 给容器追加 class="layui-form-pane"，即可显示为方框风格 -->
    <form class="layui-form" action="" style="margin:36px 36px">
        <div class="layui-form-item">
            <button class="layui-btn" style="background-color:red; border-radius:5px" lay-submit lay-filter="demo2">
                <i class="layui-icon layui-icon-add-1"></i>
                保存
            </button>
            <button type="reset" class="layui-btn" style="background-color:red; border-radius:5px">
                <i class="layui-icon layui-icon-refresh-1"></i>
                撤销
            </button>
        </div>
        <div><hr /></div>
        <div><h3>基本信息</h3></div>
        <div><hr /></div>
        <div class="layui-row">
            <div class="layui-col-xs8">
                <div class="layui-row" style="margin-top:30px; margin-bottom:30px">
                    <div class="layui-col-xs6">
                        <label class="layui-form-label">
                            <span style="color:red;">*</span>耳号:
                        </label>
                        <div class="layui-input-block">
                            <input style="display: none;" name="SheepType" id="SheepType" value="种公" />
                            <input style="display: none;" name="SheepGender" id="SheepGender" value="true" />
                            <input style="display: none;" name="presence" id="presence" value="在场" />
                            <input type="text" name="EarNnumber" id="EarNnumber" autocomplete="off" placeholder="请输入耳号" lay-verify="required" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-xs6">
                        <label class="layui-form-label">
                            <span style="color:red;">*</span>品种:
                        </label>
                        <div class="layui-input-block">
                            <select name="sheepBreed" id="sheepBreed" lay-verify="required" class="layui-input">
                                <option value="">请选择品种</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-row" style="margin-bottom:36px">
                    <div class="layui-col-xs6">
                        <label class="layui-form-label">电子耳标号:</label>
                        <div class="layui-input-block">
                            <input type="text" name="ElectronicEarNumber" id="ElectronicEarNumber" autocomplete="off" placeholder="请输入电子耳标号" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-xs6">
                        <label class="layui-form-label">基因等级:</label>
                        <div class="layui-input-block">
                            <select name="GeneticGrade" id="GeneticGrade" class="layui-input">
                                <option value="">请选择基因等级</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs4">
                <div class="layui-row" style="margin-left:72px;margin-top:30px">
                    <div class="layui-upload">
                        <div style="float:left;">
                            <button type="button" class="layui-btn" id="uploadBtn">上传图片</button>
                        </div>
                        <img class="layui-upload-img" name="archivesPicture" id="archivesPicture" style="margin-left:20px;max-width:200px;max-height:110px;">
                    </div>
                </div>
            </div>
        </div>

        <div><h3>出生信息</h3></div>
        <div><hr /></div>
        <div class="layui-row" style=" margin-top:30px;margin-bottom:36px">
            <div class="layui-col-xs3">
                <label class="layui-form-label">父亲耳号:</label>
                <div class="layui-input-block">
                    <input type="text" name="FatherEarNumber" id="FatherEarNumber" autocomplete="off" placeholder="请输入父亲耳号" class="layui-input">
                </div>
            </div>
            <div class="layui-col-xs3">
                <label class="layui-form-label">母亲耳号:</label>
                <div class="layui-input-block">
                    <input type="text" name="MotherEarNumber" id="MotherEarNumber" autocomplete="off" placeholder="请输入母亲耳号" class="layui-input">
                </div>
            </div>
            <div class="layui-col-xs3">
                <label class="layui-form-label">
                    <span style="color:red;">*</span>出生日期:
                </label>
                <div class="layui-input-inline layui-input-wrap">
                    <input type="text" name="sheepBir" id="sheepBir" lay-verify="date" placeholder="请选择出生日期" autocomplete="off" class="layui-input" style="width:290px">
                </div>
            </div>
        </div>
        <div class="layui-row" style="margin-bottom:36px">
            <div class="layui-col-xs3">
                <label class="layui-form-label">入场日期:</label>
                <div class="layui-input-inline layui-input-wrap">
                    <input type="text" name="inDate" id="inDate" lay-verify="date" placeholder="请选择入场日期" autocomplete="off" class="layui-input" style="width:290px">
                </div>
            </div>
            <div class="layui-col-xs3">
                <label class="layui-form-label">出生场地:</label>
                <div class="layui-input-block">
                    <input type="text" name="placeBirth" id="placeBirth" autocomplete="off" placeholder="请输入出生场地" class="layui-input">
                </div>
            </div>
            <div class="layui-col-xs3">
                <label class="layui-form-label" style="width:100px;margin-left:-20px">
                    <span style="color:red;">*</span>出生重(公斤):
                </label>
                <div class="layui-input-block">
                    <input type="text" name="BirthWeight" id="BirthWeight" autocomplete="off" placeholder="请输入出生重(公斤)" lay-verify="number" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-row" style="margin-bottom:36px">
            <div class="layui-col-xs9">
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">备注：</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入备注信息" name="archivesRemark" id="archivesRemark" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <script>
        layui.use(['laydate', 'form'], function () {
            var $ = layui.$;
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var upload = layui.upload;

            // 出生日期
            laydate.render({
                elem: '#sheepBir'
            });
            // 入场日期
            laydate.render({
                elem: '#inDate'
            });


            // 羊只品种
            $(document).ready(function () {
                $.ajax({
                    url: 'http://10.31.60.18:8000/ArchivesGetRout/api/Archives/GetSheepBreeds', // 后端枚举数据接口地址
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {
                        $.each(res, function (index, item) {
                            // 使用正确的字段添加选项到下拉框中
                            var option = $('<option>').val(item.value).text(item.value);
                            $('#sheepBreed').append(option);
                        });
                        // 手动触发 layui 组件的渲染
                        layui.form.render('select');
                    },
                    error: function () {
                        // 处理 AJAX 请求失败的情况
                        console.error('Failed to fetch data for dropdown.');
                    }
                });
            });


            // 基因等级
            $(document).ready(function () {
                $.ajax({
                    url: 'http://10.31.60.18:8000/ArchivesGetRout/api/Archives/GetGeneticGrade', // 后端枚举数据接口地址
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {
                        $.each(res, function (index, item) {
                            // 使用正确的字段添加选项到下拉框中
                            var option = $('<option>').val(item.value).text(item.value);
                            $('#GeneticGrade').append(option);
                        });
                        // 手动触发 layui 组件的渲染
                        layui.form.render('select');
                    },
                    error: function () {
                        // 处理 AJAX 请求失败的情况
                        console.error('Failed to fetch data for dropdown.');
                    }
                });
            });

            // 上传
            upload.render({
                elem: '#uploadBtn',
                url: 'http://10.31.60.18:8000/FileUploadRout/api/File/UploadFile', // 实际使用时改成您自己的上传接口即可。
                done: function (res) {
                    document.getElementById('archivesPicture').src = res;
                    window.localStorage.setItem('malePicture', res);
                    layer.msg('上传成功');
                }
            });

            // 提交事件
            form.on('submit(demo2)', function (data) {
                var formData = data.field; // 获取表单字段值
                formData.SheepGender = data.field.SheepGender === 'true';
                console.log(formData);

                // 发送Ajax请求
                $.ajax({
                    url: 'http://10.31.60.18:8000/ArchivesSetRout/api/Archives/ArchivesInsert',
                    type: 'post',
                    data: JSON.stringify(formData),
                    contentType: 'application/json',
                    success: function (res) {
                        // 请求成功的处理
                        if (res == 1) {
                            layer.alert('新增成功', {
                                shadeClose: true,
                                title: '新增种公'
                            }, function () {
                                location.href = '/IAMH/ArchivesList';
                            });
                            // layer.msg('新增成功');
                            // location.href = '/IAMH/ArchivesList';
                            // 在这里可以根据后台返回的数据进行其他操作
                        } else {
                            layer.msg('新增失败：' + res.msg);
                        }
                    },
                    error: function () {
                        // 请求失败的处理
                        layer.msg('请求失败，请重试');
                    }
                });
                // 阻止表单默认提交
                return false;
            });

        });
    </script>

</body>
